<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>堂食优惠设置</title>
    <!-- Bootstrap -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="fonts/iconfont.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet" />
    <link href="../assets/css/tabletable.css" rel="stylesheet" />
    <link href="../assets/css/content.css" rel="stylesheet" />
    <link href="../assets/css/form.css" rel="stylesheet" />
    <link href="../assets/css/motai.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="../assets/js/html5shiv.min.js"></script>
          <script src="../assets/js/respond.min.js"></script>
          <![endif]-->
    <style type="text/css">
      .bordernone {
        border: none !important;
      }
      .qh-btn {
        width: 100%;
        height: 50px;
        background: #F1F1F1;
        border-bottom: 3px solid #e66b18;
      }
      
      .huxxtxlable {
        line-height: 40px;
      }
      .hyjzflright{
        float: right;
        margin-right: 50px;
      }
      @media only screen and (max-width: 800px) {
        .hyjzflright{
          float: right;
          margin-right: 20px;
        }
      }
      @media only screen and (max-width: 700px) {
        .hyjzflright{
          float: left;
          margin-right: 0px;
        }
      }
      @media screen and (max-width: 550px) {
        .qh-btn .jy_table_list ul li {
          width: 30%;
        }
      }
      .withe-input{
        background: #FFFFFF;
        border: 1px solid #D7D7D7;
      }
      .tsyh-viplevel{
        margin-top: 10px;
        font-size: 15px;
        width: 100%;
      }
      .tsyh-viplevel span{
        display: inline-block;
        width: 18%;
      }
      .tsyh-viplevelcj span{
          display: inline-block;
          width: 18%;
      }
      .cphuiyuan .firstth{
        height:83px !important;
        line-height: 52px !important;
      }
    </style>
  </head>

  <body>
    <!--内容区域-->
    <div class="content">
      <nav class="navbar navbar-default content-header backf1 br0 mb0" role="navigation">
        <div class="container-fluid">
          <span class="nav-title-pre"></span>
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>

            <a class="navbar-brand" href="#">堂食优惠设置</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li class="text-center">
                <div class="form-group nav-kq">
                  <label for="firstname" class="control-label slowlable">服&emsp;&emsp;务</label>
                  <div style="display: inline-block; margin-left: 20px;">
                    <span class="beijing">
                    <span class="yuanquan"></span>
                    </span>
                    <span class="open">已开启</span>
                    <div class="clearfix"></div>

                  </div>
                </div>
              </li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>

      <div class="clear"></div>
      <div class="qh-btn mt20">
        <div class="jy_table_list col-md-12">
          <ul>
            <li class="active">整单满减</li>
            <li>菜类折扣</li>
            <li>菜品会员价</li>
            <div class="clear"></div>
          </ul>
        </div>
      </div>
      <div class="jy_contet_list bordernone">
        <div class="table-responsive mt20">
          <table class="table">
            <thead class="tablethead">
              <tr>
                <th class="firstth" valign="middle">序号</th>
                <th class="secondta">等级</th>
                <th>整单金额(元)</th>
                <th>满减金额(元)</th>
                <th>启用状态</th>
                <th class="text-center">操作</th>
              </tr>
            </thead>
            <tbody class="mytable">
              <tr>
                <td class="firsttd" valign="middle">1</td>
                <td class="secondta">23</td>
                <td>每满
                  <span class="setczinput hidden"><input type="text" class="form-control inline-input withe-input"></span>
                  <span class="setczje">300</span>元</td>
                <td>
                  <span class="setczinput hidden"><input type="text" class="form-control inline-input withe-input"></span>
                  <span class="setczje">300</span>
                </td>
                <td><div class="enable" onclick="status(this)"></div></td>
                <td class="text-center">
                <button type="button" class="btn btn-default btn-table setsavebtn">编辑</button>
                <span class="button-pre"></span>
                <button type="button" class="btn btn-default btn-table setresetbtn">重置</button>
                <button type="button" class="btn btn-default btn-table setcanclebtn hidden">取消</button>
              </td>
              </tr>
              <tr>
                <td class="firsttd" valign="middle">1</td>
                <td class="secondta">23</td>
                <td>每满
                  <span class="setczinput hidden"><input type="text" class="form-control inline-input withe-input"></span>
                  <span class="setczje">300</span>
                              元</td>
                <td>
                  <span class="setczinput hidden"><input type="text" class="form-control inline-input withe-input"></span>
                  <span class="setczje">300</span>
                </td>
                <td><div class="enable" onclick="status(this)"></div></td>
                <td class="text-center">
                <button type="button" class="btn btn-default btn-table setsavebtn">编辑</button>
                <span class="button-pre"></span>
                <button type="button" class="btn btn-default btn-table setresetbtn">重置</button>
                <button type="button" class="btn btn-default btn-table setcanclebtn hidden">取消</button>
              </td>
              </tr>
              <tr>
                <td class="firsttd" valign="middle">1</td>
                <td class="secondta">23</td>
                <td>每满<span class="setczinput hidden"><input type="text" class="form-control inline-input withe-input"></span>
                  <span class="setczje">300</span>元</td>
                <td>
                  <span class="setczinput hidden"><input type="text" class="form-control inline-input withe-input"></span>
                  <span class="setczje">300</span>
                </td>
                <td><div class="enable" onclick="status(this)"></div></td>
                <td class="text-center">
                <button type="button" class="btn btn-default btn-table setsavebtn">编辑</button>
                <span class="button-pre"></span>
                <button type="button" class="btn btn-default btn-table setresetbtn">重置</button>
                <button type="button" class="btn btn-default btn-table setcanclebtn hidden">取消</button>
              </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="jy_contet_list bordernone hidden">
        <div class="content_serach row mt-10">
          <input type="text" class="form-control serach_input" placeholder="请输入名称">
          <button type="button" class="btn btn-info serach_btn">搜索&nbsp;&nbsp;<i class="icon iconfont icon-sousuo icon_serach"></i></button>
          <button type="button" class="btn btn-info serach_btn hyjzflright" data-toggle="modal" data-target="#tjfl">添加分类</button>
        </div>
        <div class="table-responsive mt20">
          <table class="table">
            <thead class="tablethead">
              <tr>
                <th class="firstth" valign="middle">序号</th>
                <th class="secondta">菜品分类名称</th>
                <th>菜品等级</th>
                <th>菜品折扣(%)</th>
                <th>启用状态</th>
                <th class="text-center">操作</th>
              </tr>
            </thead>
            <tbody class="mytable">
              <tr>
                <td class="firsttd" valign="middle">1</td>
                <td class="secondta">烧烤</td>
                <td>2</td>
                <td>34</td>
                <td><div class="enable" onclick="status(this)"></div></td>
                <td class="text-center">
                <button type="button" class="btn btn-default btn-table">编辑</button>
                  <span class="button-pre"></span>
                  <button type="button" class="btn btn-default btn-table">重置</button>
                </td>
              </tr>
              <tr>
                <td class="firsttd" valign="middle">1</td>
                <td class="secondta">烧烤</td>
                <td>2</td>
                <td>34</td>
                <td><div class="enable" onclick="status(this)"></div></td>
                <td class="text-center">
                <button type="button" class="btn btn-default btn-table">编辑</button>
                  <span class="button-pre"></span>
                  <button type="button" class="btn btn-default btn-table">重置</button>
                </td>
              </tr>
              <tr>
                <td class="firsttd" valign="middle">1</td>
                <td class="secondta">烧烤</td>
                <td>2</td>
                <td>34</td>
                <td><div class="enable" onclick="status(this)"></div></td>
                <td class="text-center">
                <button type="button" class="btn btn-default btn-table">编辑</button>
                  <span class="button-pre"></span>
                  <button type="button" class="btn btn-default btn-table">重置</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="jy_contet_list bordernone hidden">
        <div class="content_serach row mt-10">
          <input type="text" class="form-control serach_input" placeholder="请输入名称">
          <button type="button" class="btn btn-info serach_btn">搜索&nbsp;&nbsp;<i class="icon iconfont icon-sousuo icon_serach"></i></button>
          <button type="button" class="btn btn-info serach_btn hyjzflright" data-toggle="modal" data-target="#tjyhcp">添加优惠菜品</button>
        </div>
        <div class="table-responsive mt20">
          <table class="table cphuiyuan">
            <thead class="tablethead">
              <tr>
                <th class="firstth" valign="middle">序号</th>
                <th class="secondta">菜品</th>
                <th>原价(元)</th>
                <th>菜品分类</th>
                <th>
                  <div>菜类会员价</div>
                  <div class="tsyh-viplevel">
                    <span>等级</span>
                    <span>等级</span>
                    <span>等级</span>
                    <span>等级</span>
                    <span>等级</span>
                  </div>
                </th>
                <th>启用状态</th>
                <th class="text-center">操作</th>
              </tr>
            </thead>
            <tbody class="mytable">
              <tr>
                <td class="firsttd" valign="middle">1</td>
                <td class="secondta">烧烤</td>
                <td>22</td>
                <td>20</td>
                <td>
                  <div class="tsyh-viplevelcj">
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                  </div>
                </td>
                <td><div class="enable" onclick="status(this)"></div></td>
                <td class="text-center">
                <button type="button" class="btn btn-default btn-table">编辑</button>
                  <span class="button-pre"></span>
                  <button type="button" class="btn btn-default btn-table">重置</button>
                </td>
              </tr>
              <tr>
                <td class="firsttd" valign="middle">1</td>
                <td class="secondta">烧烤</td>
                <td>22</td>
                <td>20</td>
                <td>
                  <div class="tsyh-viplevelcj">
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                  </div>
                </td>
                <td><div class="enable" onclick="status(this)"></div></td>
                <td class="text-center">
                <button type="button" class="btn btn-default btn-table">编辑</button>
                  <span class="button-pre"></span>
                  <button type="button" class="btn btn-default btn-table">重置</button>
                </td>
              </tr>
              <tr>
                <td class="firsttd" valign="middle">1</td>
                <td class="secondta">烧烤</td>
                <td>22</td>
                <td>20</td>
                <td>
                  <div class="tsyh-viplevelcj">
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                  </div>
                </td>
                <td><div class="enable" onclick="status(this)"></div></td>
                <td class="text-center">
                <button type="button" class="btn btn-default btn-table">编辑</button>
                  <span class="button-pre"></span>
                  <button type="button" class="btn btn-default btn-table">重置</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
		<!-- 添加分类 -->
		  	<div class="modal fade" id="tjfl" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  		<div class="modal-dialog">
		  			<div class="modal-content">
		  				<div class="modal-header">
		  					<div class="zuo-close" data-dismiss="modal">
		  						<i class="iconfont icon-o1"></i>
		  					</div>
		  					<h5 class="modal-title" id="myModalLabel"><i class="iconfont icon-weixin"></i>&emsp;添加分类</h5>
		  				</div>
		  				<div class="modal-body">
		  					<div class="row">
		  						<!-- 里面的表单 -->
		  						<form class="form-horizontal" role="form">



		  							<div class="form-group">
		  								<label for="lastname" class="col-sm-3 control-label"><span class="bitian">*</span>菜品分类名称</label>
		  								<div class="col-sm-8">
		  									<select id="usertype" name="usertype" class="selectpicker show-tick form-control" data-live-search="true">
		  										<option value="0">请选择</option>
		  										<option value="1">菠萝</option>
		  										<option value="2">香蕉</option>
		  										<option value="3">火龙果</option>
		  										<option value="4">梨子</option>
		  										<option value="5">草莓</option>
		  										<option value="6">哈密瓜</option>
		  										<option value="7">椰子</option>
		  										<option value="8">猕猴桃</option>
		  										<option value="9">桃子</option>
		  									</select>
		  								</div>
		  							</div>
		  							<div class="form-group">
		  								<label for="lastname" class="col-sm-3 control-label"><span class="bitian">*</span>等级</label>
		  								<div class="col-sm-8">
		  									<select id="usertype" name="usertype" class="selectpicker show-tick form-control" data-live-search="true">
		  										<option value="0">请选择</option>
		  										<option value="1">菠萝</option>
		  										<option value="2">香蕉</option>
		  										<option value="3">火龙果</option>
		  										<option value="4">梨子</option>
		  										<option value="5">草莓</option>
		  										<option value="6">哈密瓜</option>
		  										<option value="7">椰子</option>
		  										<option value="8">猕猴桃</option>
		  										<option value="9">桃子</option>
		  									</select>
		  								</div>
		  							</div>

		  							<div class="form-group">
		  								<label for="firstname" class="col-sm-3 control-label"><span class="bitian">*</span>菜品折扣(%)</label>
		  								<div class="col-sm-8">
		  								<input type="text" class="form-control" id="firstname" placeholder="请输入折扣">
		  								</div>
		  							</div>
		  						</form>
		  					</div>
		  				</div>
		  				<div class="modal-footer">

		  					<button type="button" class="btn save">保存</button>
		  					<button type="button" class="btn  close_motai" data-dismiss="modal">关闭</button>
		  				</div>
		  			</div>
		  			<!-- /.modal-content -->
		  		</div>
		  		<!-- /.modal -->
		  	</div>
		  	<!-- 添加优惠菜品 -->
		  	<div class="modal fade" id="tjyhcp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  		<div class="modal-dialog">
		  			<div class="modal-content">
		  				<div class="modal-header">
		  					<div class="zuo-close" data-dismiss="modal">
		  						<i class="iconfont icon-o1"></i>
		  					</div>
		  					<h5 class="modal-title" id="myModalLabel"><i class="iconfont icon-weixin"></i>&emsp;添加分类</h5>
		  				</div>
		  				<div class="modal-body">
		  					<div class="row height211-overflow">
		  						<!-- 里面的表单 -->
		  						<form class="form-horizontal" role="form">



		  							<div class="form-group">
		  								<label for="lastname" class="col-sm-3 control-label"><span class="bitian">*&nbsp;</span>菜品名称</label>
		  								<div class="col-sm-8">
		  									<select id="usertype" name="usertype" class="selectpicker show-tick form-control" data-live-search="true">
		  										<option value="0">请选择</option>
		  										<option value="1">菠萝</option>
		  										<option value="2">香蕉</option>
		  										<option value="3">火龙果</option>
		  										<option value="4">梨子</option>
		  										<option value="5">草莓</option>
		  										<option value="6">哈密瓜</option>
		  										<option value="7">椰子</option>
		  										<option value="8">猕猴桃</option>
		  										<option value="9">桃子</option>
		  									</select>
		  								</div>
		  							</div>
		  			
		  							<div class="form-group">
		  								<label class="col-sm-3 control-label">
		  								<span class="bitian">*&nbsp;</span>等级:1级</label>
		  								<label class="col-sm-3 control-label ">
		  								<span class="bitian">*&nbsp;</span>菜品会员价(元)
		  								</label>
		  								<div class="col-sm-5">
		  								<input type="text" class="form-control" id="firstname" placeholder="请输入价格">
		  								</div>
		  							</div>

		  							<div class="form-group">
		  								<label class="col-sm-3 control-label">
		  								<span class="bitian">*&nbsp;</span>等级:2级</label>
		  								<label class="col-sm-3 control-label">
		  								<span class="bitian">*&nbsp;</span>菜品会员价(元)
		  								</label>
		  								<div class="col-sm-5">
		  								<input type="text" class="form-control" id="firstname" placeholder="请输入价格">
		  								</div>
		  							</div>

		  							<div class="form-group">
		  								<label class="col-sm-3 control-label">
		  								<span class="bitian">*&nbsp;</span>等级:3级</label>
		  								<label class="col-sm-3 control-label">
		  								<span class="bitian">*&nbsp;</span>菜品会员价(元)
		  								</label>
		  								<div class="col-sm-5">
		  								<input type="text" class="form-control" id="firstname" placeholder="请输入价格">
		  								</div>
		  							</div>

		  							<div class="form-group">
		  								<label class="col-sm-3 control-label">
		  								<span class="bitian">*&nbsp;</span>等级4级</label>
		  								<label class="col-sm-3 control-label">
		  								<span class="bitian">*&nbsp;</span>菜品会员价(元)
		  								</label>
		  								<div class="col-sm-5">
		  								<input type="text" class="form-control" id="firstname" placeholder="请输入价格">
		  								</div>
		  							</div>

		  							<div class="form-group">
		  								<label class="col-sm-3 control-label">
		  								<span class="bitian">*&nbsp;</span>等级5级</label>
		  								<label class="col-sm-3 control-label">
		  								<span class="bitian">*&nbsp;</span>菜品会员价(元)
		  								</label>
		  								<div class="col-sm-5">
		  								<input type="text" class="form-control" id="firstname" placeholder="请输入价格">
		  								</div>
		  							</div>
		  						</form>
		  					</div>
		  				</div>
		  				<div class="modal-footer">

		  					<button type="button" class="btn save">保存</button>
		  					<button type="button" class="btn  close_motai" data-dismiss="modal">关闭</button>
		  				</div>
		  			</div>
		  			<!-- /.modal-content -->
		  		</div>
		  		<!-- /.modal -->
		  	</div>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/main.js"></script>
    <script type="text/javascript">
      $('.setsavebtn').on('click',function(){
        var keyword = $(this).parent().siblings().children(".setczinput").children('.withe-input').val();
        if($(this).html() == '保存'){
          if(keyword == ''){
            alert('不能为空！')
          }
          else{
            $(this).parent().siblings().children(".setczinput").addClass('hidden');
            $(this).parent().siblings().children(".setczje").removeClass('hidden');
            $(this).html('编辑');
            $(this).parent().siblings().children(".setczje").html(keyword);
          }
        }
        else{
          $(this).parent().siblings().children(".setczinput").removeClass('hidden');
          $(this).parent().siblings().children(".setczje").addClass('hidden')
          $(this).html('保存');
          $(this).siblings('.setresetbtn').addClass('hidden');
          $(this).siblings('.setcanclebtn').removeClass('hidden');
        }
        
      })
      $('.setcanclebtn').on('click',function(){
        $(this).parent().siblings().children(".setczinput").addClass('hidden');
        $(this).parent().siblings().children(".setczje").removeClass('hidden');
        $(this).siblings('.setsavebtn').html('编辑');
        $(this).siblings('.setresetbtn').removeClass('hidden');
        $(this).addClass('hidden')
      })
      colorStyle();
        // 给奇数行和偶数行不同的颜色
        function colorStyle(){
          $(".mytable").find("tr:even").addClass("oushu");
          $(".mytable").find("tr:odd").addClass("jishu");
          $(".mytable").find("tr:odd td:first-child").addClass("jishu");
        }
  
        // 给第一列高度
        firstTrHeight()
        function firstTrHeight() {
          for(var i = $(".mytable tr").length - 1; i >= 0; i--) {
            var trht = $(".mytable tr")[i].offsetHeight
            var domtr = $(".mytable tr")[i];
            // 有30px的边距
            $(domtr).children('td').height(trht - 30);
            $(domtr).children('.firsttd').css('line-height', trht - 30 + 'px');
          };
        }
      // table切换选中第几个下面的第几个div显现
      $('.jy_table_list ul li').on('click', function() {
        var index = $(this).index();
        $('.jy_table_list ul li').removeClass("active")
        $('.jy_table_list ul li').eq(index).addClass("active")
        $('.jy_contet_list').addClass('hidden')
        $('.jy_contet_list').eq(index).removeClass("hidden")
         firstTrHeight()
      })
      function status(obj) {
        if($(obj).hasClass("enable")) {
          $(obj).removeClass("enable");
          $(obj).addClass("disable");
        } else {
          $(obj).addClass("enable");
          $(obj).removeClass("disable");
        }
      }
      $(".yuanquan").on('click',function() {
          if ($(this).hasClass('colose-input')) {
            $(this).removeClass('colose-input');
            $(this).parent().siblings('.open').html('已开启')
            $(this).parent().removeClass('huibeijing');

          }else{
            $(this).parent().siblings('.open').html('已关闭')
            $(this).addClass('colose-input');
            $(this).parent().addClass('huibeijing');

          }
        })
    </script>
  </body>

</html>